<template>
  <div class="search">
    <!-- 顶部搜索框 -->
    <div class="top">
      <van-icon name="arrow-left" @click="$router.back()" />
      <van-search
        v-model="searchVal"
        show-action
        :clearable="true"
        autofocus
        shape="round"
        background="teal"
        placeholder="请输入搜索关键词"
        @focus="isShow = false"
      >
        <template #action>
          <div @click="onSearch(searchVal)" class="searchText">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 搜索结果 -->
    <search-result v-if="isShow" :hadSearch="searchVal" />
    <!-- 联想建议 -->
    <!-- 通过 searchVal 的值作为判断条件 很巧妙 -->
    <search-suggest
      v-else-if="searchVal"
      :searchVal="searchVal"
      @goSearch="onSearch"
    />
    <!-- 搜索历史  -->
    <!-- <search-history v-else :historyList="historyList" @deleteHistory="deleteHistory" @goResult="onSearch" /> -->
    <search-history v-else :historyList="historyList"
    @alldelete="alldelete"
    @goResult="onSearch" />
  </div>
</template>

<script>
import SearchHistory from './search-history/index.vue'
import SearchSuggest from './search-suggest/index.vue'
import SearchResult from './search-result/index.vue'
import { setItem, getItem } from '@/utils/storage'
export default {
  data () {
    return {
      // 输入框的值
      searchVal: '',
      // 控制搜索结果的展示
      isShow: false,
      // 搜索过的值
      historyList: getItem('TOUTIAO_SEARCHHISTORY') || []
    }
  },
  methods: {
    onSearch (val) {
      console.log('搜索结果', val)
      this.isShow = true
      this.searchVal = val
      // 历史记录不能重复，最新的历史记录排到最前面
      // const isHas = this.historyList.includes(val)
      // if (isHas) {
      //   // 已存在
      //   this.historyList.unshift(val)
      //   this.historyList = [...new Set(this.historyList)]
      // } else {
      //   this.historyList.unshift(val)
      // }
      const index = this.historyList.indexOf(val)
      if (index !== -1) {
        // 存在 等于-1 说明数组中没有该元素
        this.historyList.splice(index, 1)
      }
      this.historyList.unshift(val)
    },
    // 全选删除按钮 删除所有历史记录
    alldelete () {
      this.historyList = []
    }
    // deleteHistory (index) {
    //   this.historyList.splice(index, 1)
    // }
  },
  watch: {
    historyList (val) {
      // 将最新搜索历史存储到本地
      setItem('TOUTIAO_SEARCHHISTORY', val)
    }
  },
  components: {
    SearchHistory,
    SearchSuggest,
    SearchResult
  }
}
</script>

<style lang="less" scoped>
.search {
  position: relative;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    // width: 100%;
    background: teal;
    .van-icon-arrow-left {
      margin-left: 20px;
      font-size: 40px;
      color: #ccc;
    }
    /deep/ .van-search {
      flex: 1;
      .van-search__action::before {
        background-color: transparent !important;
      }
      .searchText {
        padding: 0 18px;
        color: #eee;
        line-height: 55px;
        border: 1px solid #ddd;
        border-radius: 50px;
      }
    }
  }
}
</style>
